import "./arrange.css"
import { 
  Table, Card, Badge, Descriptions, Typography
} from 'antd';
import { 
 UserOutlined, FileTextOutlined,
  CalendarOutlined, ClockCircleOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;
//排班详情模态框(排班历史 )
export const ArrangeDetails = (props) => {
  // 从props获取排班数据，添加默认值避免undefined错误
  const { data: selectedSchedule = {} } = props;
  console.log(selectedSchedule)
  
  // 预约信息表格列定义
  const reservationColumns = [
    {
      title: '客户姓名',
      dataIndex: 'customerName',
      key: 'customerName',
    },
    {
      title: '联系方式',
      dataIndex: 'contact',
      key: 'contact',
    },
    {
      title: '预约渠道',
      dataIndex: 'channel',
      key: 'channel',
    },
    {
      title: '预约时间',
      dataIndex: 'reserveTime',
      key: 'reserveTime',
    },
    {
      title: '预约状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <Badge status="success" text={status} />
      ),
    },
  ];

  // 操作日志表格列定义
  const operationLogColumns = [
    {
      title: '操作时间',
      dataIndex: 'operateTime',
      key: 'operateTime',
    },
    {
      title: '操作人',
      dataIndex: 'operator',
      key: 'operator',
    },
    {
      title: '操作类型',
      dataIndex: 'operationType',
      key: 'operationType',
    },
    {
      title: '操作IP',
      dataIndex: 'ipAddress',
      key: 'ipAddress',
    },
    {
      title: '操作描述',
      dataIndex: 'description',
      key: 'description',
    },
  ];

  // 为所有可能的空数据提供默认值，防止渲染错误
  const {
  
    status = '',
   
    reservations = [],
    operationLogs = []
  } = selectedSchedule;

  return (
    <div className="modal-box">
      <Card 
        className="detail-header" 
        style={{ 
          backgroundColor: 'rgba(245, 245, 220, 0.3)',
          marginBottom: 24,
          border: 'none'
        }}
      >
        <Descriptions column={3} bordered>
          <Descriptions.Item label="排班日期" icon={<CalendarOutlined />}>
            {selectedSchedule.date}
          </Descriptions.Item>
          <Descriptions.Item label="时间段/时长" icon={<ClockCircleOutlined />}>
            {selectedSchedule.timeSlot}
          </Descriptions.Item>
        
          <Descriptions.Item label="服务项目">
            {selectedSchedule.service}
          </Descriptions.Item>
          <Descriptions.Item label="排班状态">
            <Text type="warning">{status}</Text>
          </Descriptions.Item>
          <Descriptions.Item label="最后更新时间">
            {selectedSchedule.updateTime}
          </Descriptions.Item>
        </Descriptions>
      </Card>


      {/* 预约信息部分 */}
      <div style={{ marginBottom: 24 }}>
        <Title level={4} style={{ 
          marginBottom: 12, 
          display: 'flex', 
          alignItems: 'center',
          color: '#2F4F4F'
        }}>
          <UserOutlined style={{ marginRight: 8, color: '#8B5A2B' }} />
          预约信息
        </Title>
        
        <Table 
          columns={reservationColumns}
          dataSource={reservations}
          pagination={false}
          bordered
          rowClassName={() => 'hover:bg-gray-50 transition-colors'}
        />
      </div>

      {/* 操作日志部分 */}
      <div>
        <Title level={4} style={{ 
          marginBottom: 12, 
          display: 'flex', 
          alignItems: 'center',
          color: '#2F4F4F'
        }}>
          <FileTextOutlined style={{ marginRight: 8, color: '#8B5A2B' }} />
          操作日志
        </Title>
        
        <Table 
          columns={operationLogColumns}
          dataSource={operationLogs}
          pagination={false}
          bordered
          rowClassName={() => 'hover:bg-gray-50 transition-colors'}
        />
      </div>
    </div>
  );
};
